<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
            <title>Play</title>
			<link type="text/css" href="css/play.css" rel="stylesheet">
			<script type='text/javascript' src='js/jquery-2.1.3.js'></script>
      	 	 <script type='text/javascript' src='js/play.js'></script>
      	 	 <script type='text/javascript' src='../Game/js/simple.js'></script>	
			<script type='text/javascript' src='../Game/js/sprites.js'></script>
			<script type='text/javascript' src='../Game/js/canvas.js'></script>
			<script type='text/javascript' src='../Game/js/quest_specs.js'></script>
			<script type='text/javascript' src='../Game/js/Player.js'></script>
			<script type='text/javascript' src='../Game/js/game_entity.js'></script>
			<script type='text/javascript' src='../Game/js/map_objects_specs.js'></script>
			<script type='text/javascript' src='../Game/js/map_objects.js'></script>
			<script type='text/javascript' src='../Game/js/bonus_objects.js'></script>
			<script type='text/javascript' src='../Game/js/quest_objects.js'></script>
			<script type='text/javascript' src='../Game/js/quest.js'></script>
			<script type='text/javascript' src='../Game/js/infobar.js'></script>
			<script type='text/javascript' src='../Game/js/map.js'></script>
			<script type='text/javascript' src='../Game/js/moveables.js'></script>
			<script type='text/javascript' src='../Game/js/casts.js'></script>
			<script type='text/javascript' src='../Game/js/mobs.js'></script>
			<script type='text/javascript' src='../Game/js/armor.js'></script>
			<script type='text/javascript' src='../Game/js/hero.js'></script>
			<script type='text/javascript' src='../Game/js/monster.js'></script>
			<script type='text/javascript' src='../Game/js/boss.js'></script>
			<script type='text/javascript' src='../Game/js/quest.js'></script>
			<script type='text/javascript' src="../Game/js/levels_settings.js"></script>
			<script type='text/javascript' src='../Game/js/game.js'></script>
    </head>
     <body>
       <div id='container'>
			<header>
				<div class='logo'>
					<h1 class='eightbit'>The Demise of Balor</h1>
					<h3 class='eightbit'>All evil shall perish</h3>
				</div>
			</header>
			
			<div id='content'>				
				<div class='menu_holder'>
					<ul class='menu eightbit'>
						<li><a href='home.html'>home</a></li>
						<li><a class='active' href='play.html'>play</a></li>
						<li><a href='how_to_play.html'>how to play</a></li>
						<li><a href='highscores.html'>high scores</a></li>
						<li><a href='login.html'>profile</a></li>
					</ul>
				</div>
				<div class='articles'>
				<h2 class="eightbit">Play</h2><hr>
				
				<div id='container-game'>
						<div class='game_intro'>
							<p><br><br><br><br>
						Kalden was the only son in the Sterns family. They lived in a mansion built in the Divindale forest. Kaldens life went in practicing the 3 main fighting styles in his age - sorcery, archery and swordfight, although he was good in only one of them. One day while he was doing his normal practice, a mysterious red light covered the whole sky and after a few moments everything fell in darkness. Kalden woke near the ruins of his home, he didn't know what happened. Near the rubble he saw his grandfather, when he got closer he demanded for an explanation and so he learned the truth about his family. He was a 4th generation guardian, his family was burdoned with the task to stop the Monster Balor(The King of Death) from rising again. But alas they failed and on top of that his parents were nowhere to be found. And so our brave hero took the quest to rid the world from Balors terror.
							</p>
							<p class='textend'>The Demise of Balor</p>
						</div>

						<div id="selector_header">Select your class</div>
						<div class="selector className" id="warrior" data-className='warrior'>
							<h3>Warrior</h3>
							<img src="img/warrior.png" alt="some_text">
							<h4>Starting health : 125</h4>
							<h4>Starting mana : 75</h4>
							<h4>melee atack: 20</h4>
							<h4>range atack: 5</h4>
							<h4>maximum armor: 45</h4>
						</div>
						<div class="selector className" id="hunter" data-className='hunter'>
							<h3>Hunter</h3>
							<img src="img/hunter.png" alt="some_text">
							<h4>Starting health : 100</h4>
							<h4>Starting mana : 100</h4>
							<h4>melee atack: 6</h4>
							<h4>range atack: 10</h4>
							<h4>maximum armor: 20</h4>
						</div>	
						<div class="selector className" id="mage" data-className='mage'>
							<h3>Mage</h3>
							<img src="img/mage.png" alt="some_text">
							<h4>Starting health : 75</h4>
							<h4>Starting mana : 125</h4>
							<h4>melee atack: 3</h4>
							<h4>range atack: 20</h4>
							<h4>maximum armor: 2</h4>
						</div>										
				</div>
				</div>				
			</div>
			
			<footer>
				<div  class='links'>
					<a href='http://en.wikipedia.org/wiki/Role-playing_video_game'>Resourse 1</a> | 
					<a href='http://opengameart.org/content/lpc-medieval-fantasy-character-sprites'>Resourse 2</a> | 
					<a href='http://www.lostgarden.com/2006/07/more-free-game-graphics.html'>Resourse 3</a>
				</div>
			</footer>
	   </div>
    </body>
</html>
